<style lang="less">
.title-text span {
  display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
  position: relative; /*定位横线（当横线的父元素）*/

  color: black; /*居中文字的颜色*/
  font-weight: bold;
  text-align: center;
}

.title-text span:before,
.title-text span:after {
  content: "";
  position: absolute; /*定位背景横线的位置*/
  top: 50%;
  background: #dfdfdf; /*背景横线颜色*/
  width: 44%; /*单侧横线的长度*/
  height: 1px;
}

.title-text span:before {
  left: 0; /*调整背景横线的左右距离*/
}

.title-text span:after {
  right: 0;
}
.ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner:after {
    border-color: #6f6969;
}
  .img_wp{
    width:400px;
    margin:0 10px;
    float:left;
    cursor:pointer;
  }
  .img_wp:first-child{
    margin-left: 40%;
    margin-top: 19px;
  }
  .img_wp img{
    width:100%;
    height:240px;
    border:1px dotted #d7d7d7;
  }
  .img_intro{
    color:#EB9620;
    text-align:center;
    font-family:"微软雅黑";
    padding:10px 0 10px 0;
  }
  .img_wp_copy{
    margin:0 10px;
    float:left;
    cursor:pointer;
  }
    .img_wp_copy:first-child{
    margin-left: 40%;
    margin-top: 19px;
  }
    .img_wp_copy img{
    width:100%;
    border:1px dotted #d7d7d7;
  }

</style>
<template >

  <div class="search" style="background-color: rgb(255,255,255)">
    <div class="addInfo" style="display: block">
      <h2 class="title-text"><span>审核意见</span></h2>
      <Row style="margin-top: 1%;border: 1px solid #dcdee2; border-color: #e8eaec;    margin: 8px;">
        <Form ref="companyForm" :model="companyForm" :label-width="140">
          <Row style="padding-top: 11px">
            <i-col span="12">
              <FormItem label="审核意见" prop="useStstus" style="margin-left: 40%">
                <Select v-model="companyForm.useStstus" filterable style="    width: 200px;" size="default">
                  <Option value="00">通过</Option>
                  <Option value="04">拒绝</Option>
                </Select>
              </FormItem>
            </i-col>

          </Row>
          <Row >
            <i-col span="12">
                    <Form-item label="意见" prop="audit" style="margin-left: 40%">
                      <Select v-model="audit" placeholder="请选择" size="default" clearable style="width: 160%" @on-change="checkAudit">
                         <Option v-for="item in auditOpinion" :value="item.title" :key="item.title">{{ item.title }}
                      </Option>
                      </Select>
                    </Form-item>
            </i-col>
            
          </Row>
          <Row>
            <i-col span="12">
              <FormItem label="备注" prop="startStopReason" style="margin-left: 40%">
                <Input type="textarea" size="default" v-model="companyForm.startStopReason" clearable placeholder="请输入"  maxlength="100" show-word-limit :autosize="true"
                  style="width: 160%" />
              </FormItem>
            </i-col>
            <i-col span="6">
              <Button @click="handleBack" size="large" type="primary"
                style=" float: right;   ">返回</Button>
              <Button @click="handleCommit('companyForm')" size="large" type="primary" 
                style=" float: right; margin-right: 10px;  ">提交</Button>
            </i-col>

          </Row>

        </Form>
      </Row>
    </div>
    
    <div class="addInfo" style="display: block">
      <h2 class="title-text"><span id="gkType">申请信息</span></h2>
      <Row style="margin-top: 1%;border: 1px solid #dcdee2; border-color: #e8eaec;    margin: 8px;">
        <Form ref="companyForm" :model="companyForm"  :label-width="140">
          <Row style="padding-top: 11px">
            <i-col span="12">
              <FormItem label="SP名称" prop="channelId" style="margin-left: 40%">
                <Select v-model="companyForm.channelId" filterable disabled style="    width: 200px;" size="default">
                  <Option v-for="item in baseInfo" :value="item.id" :key="item.id">{{ item.channelFullName }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="业务类型" prop="businessType" style="margin-left: 10%">
                <Select  disabled v-model="companyForm.businessType" placeholder="请选择" clearable style="  width: 200px;" size="default">
                  <Option value="newCar">新车</Option>
                  <Option value="oldCar">二手车</Option>
                </Select>
              </FormItem>
            </i-col>

          </Row>
          <Row>
            <i-col span="12">
              <FormItem label="用户名" prop="username" style="margin-left: 40%">
                <Input type="text" size="default" disabled v-model="companyForm.username" clearable placeholder="请输入"
                  style="width: 200px" />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="见证人身份证号" prop="identityNumber" style="margin-left: 10%">
                <Input type="text" disabled size="default" v-model="companyForm.identityNumber" clearable placeholder="请输入"
                  style="width: 200px" />
              </FormItem>
            </i-col>

          </Row>

          <Row>
            <i-col span="12">
              <Form-item label="真实姓名" prop="userRealName" style="margin-left: 40%">
                <Input type="text" disabled size="default" v-model="companyForm.userRealName" clearable
                  placeholder="请输入" style="width: 200px;" />
                  <div style="color: red;" v-if="companyForm.formerUserRealName!=null&&companyForm.formerUserRealName!=undefined&&companyForm.formerUserRealName!=''&&companyForm.formerUserRealName!=companyForm.userRealName">
                    (真实姓名：{{companyForm.formerUserRealName}})
                  </div>
              </Form-item>
            </i-col>

            <i-col span="12">
              <Form-item label="部门名称" prop="departmentName" style="margin-left: 10%">
                <Input type="text" disabled size="default" v-model="companyForm.departmentName" clearable
                  placeholder="请输入" style="width: 200px;" />
                  <div style="color: red;" v-if="companyForm.formerDepartmentName!=null&&companyForm.formerDepartmentName!=undefined&&companyForm.formerDepartmentName!=''&&companyForm.formerDepartmentName!=companyForm.departmentName">
                    (部门名称：{{companyForm.formerDepartmentName}})
                  </div>
              </Form-item>
            </i-col>
          
          </Row>

          <Row>
            <i-col span="12">
              <Form-item label="手机号" prop="phone" style="margin-left: 40%">
                <Input type="text" disabled size="default" v-model="companyForm.phone" clearable
                  placeholder="请输入" style="width: 200px;" />
              <div  style="color: red;" v-if="companyForm.formerPhone!=null&&companyForm.formerPhone!=undefined&&companyForm.formerPhone!=''&&companyForm.formerPhone!=companyForm.phone">
                (手机号：{{companyForm.formerPhone}})
              </div>
              </Form-item>
            </i-col>

            <i-col span="12">
              <Form-item label="邮箱" prop="userEmail" style="margin-left: 10%">
                <Input type="text" disabled size="default" v-model="companyForm.userEmail" clearable
                  placeholder="暂无" style="width: 200px;" />
                <div  style="color: red;" v-if="companyForm.formerUserEmail!=null&&companyForm.formerUserEmail!=undefined&&companyForm.formerUserEmail!=''&&companyForm.formerUserEmail!=companyForm.userEmail">
                  (邮箱：{{companyForm.formerUserEmail}})
                </div>
              </Form-item>
            </i-col>      
          </Row>



        <Row v-if="border.length>0&&companyForm.businessType=='newCar'">
          <i-col span="24">
            <FormItem label="新车角色" prop="border" style="margin-left: 20%">
              <CheckboxGroup v-model="border">
                <Checkbox v-for="item in newRoleList" :value="item.id" :key="item.id" :label="item.id" border disabled>
                  {{item.roleName}} </Checkbox>
              </CheckboxGroup>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="24" v-if="formerBorder.length>0&&companyForm.businessType=='newCar'">
            <FormItem label="原新车角色" prop="formerBorder" style="margin-left: 20%">
              <CheckboxGroup v-model="formerBorder" >
                <Checkbox v-for="item in newRoleList" :value="item.id" :key="item.id" :label="item.id" border disabled>
                  {{item.roleName}} </Checkbox>
              </CheckboxGroup>
            </FormItem>
          </i-col>
        </Row>

        <Row v-if="border.length>0&&companyForm.businessType=='oldCar'">
          <i-col span="24">
            <FormItem label="二手车角色" prop="border" style="margin-left: 20%">
              <CheckboxGroup v-model="border" >
                <Checkbox v-for="item in oldRoleList" :value="item.id" :key="item.id" :label="item.id" border disabled>
                  {{item.roleName}} </Checkbox>
              </CheckboxGroup>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="24"  v-if="formerBorder.length>0&&companyForm.businessType=='oldCar'">
            <FormItem label="原二手车角色" prop="formerBorder" style="margin-left: 20%">
              <CheckboxGroup v-model="formerBorder" >
                <Checkbox v-for="item in oldRoleList" :value="item.id" :key="item.id" :label="item.id" border disabled>
                  {{item.roleName}} </Checkbox>
              </CheckboxGroup>
            </FormItem>
          </i-col>
        </Row>
        <Row >
        <div  class="over mt10">
                <div class="id_img_wp"> 
                    <div style="overflow: hidden;">
                      <div class="img_wp"  @click="seePhoto">
                          <img :src="imgzurl" v-if="imgzurl"/>
                          <img v-else src="../../../../../src/assets/images/zhengmian@2x.png"/>
                          <!-- <p class="img_intro">身份证人像面</p> -->
                      </div>
                  </div>
                </div>
              </div> 
      </Row>


        </Form>
      </Row>
    </div>

    <div v-if="seeUserPhoto">
             <div style="width: 100%;height: 100%;position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;z-index:100;"> 
                    <div style="overflow: hidden;">
                      <div class="img_wp_copy"  @click="seePhoto">
                          <img :src="imgzurl" v-if="imgzurl"/>
                          <img v-else src="../../../../../src/assets/images/zhengmian@2x.png"/>
                          <!-- <p class="img_intro">身份证人像面</p> -->
                      </div>
                  </div>
                </div>
       
    </div>
  </div>

</template>

<script>
import { getApplyUser,getUserById,getOldRole,getNewRole,getUserRole,getFormerUserRole,toExamine } from "@/projects/afs-channel/api/apply-user/user";
import { getBaseInfo } from "@/projects/afs-channel/api/common/common";
import { getDictDataByType } from "@/projects/basic/api/admin/datadic";
import FileOperation from "_p/basic/pages/image/upload-file/fileOperation.vue";
import { getUri } from "@/libs/tools";
export default {
  name: "apply-user-examine",
  components: {FileOperation},
  data() {
    const validateMobile = (rule, value, callback) => {
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    return {
      seeUserPhoto:false,
      imgzurl:"", // 图片
      newRoleList: [], // 新车的角色
      oldRoleList: [], // 二手车角色

      border: [], // 这个现在的集合
      formerBorder: [], // 存放老的集合用于对比


      canUpload: false,
      uploadParam: {
        busiNo: "",
        belongNo: "",
        busiType: "",
        busiData: {}
      },
      path:"channel",


      loading: true,
      modalType: 0,
      index:0,
      auditOpinion:[],
      audit:null,

      companyForm: {
        id: null,
        userId:null, // 用户id
        businessType: null, //业务类型
        username: null, // 用户名
        identityNumber: null, // 身份证号
        channelId: null, // 渠道id
        userRealName: null, //真实姓名
        formerUserRealName: null, // 原真实姓名
        department_name:null,// 部门名称
        former_department_name:null, // 原部门名称
        phone:null, // 手机号
        formerPhone:null, // 原手机号
        userEmail:null, // 邮箱
        formerUserEmail:null, // 原邮箱
        bizDataId:null, //流程id
        createTime: null, // 首次登记日期

        remake: null, // 备注

        useStstus: null, //修改的状态状态
        useRemake: null, // 修改的备注
        startStopReason: null // 原因
      },

      // 存放合作商的集合
      baseInfo: [],


      submitLoading: false,
      total: 0
    };
  },
  methods: {
    init() {
      this.companyForm.id = this.afs.getPageParams(this).id;
      this.getNewRole();
      this.getOldRole();
      this.getUserById();
      this.getBaseInfo();
      this.getChannelStatus();

    },
    checkAudit(v){
      this.companyForm.startStopReason=v;
    },
    // 获取状态数据字典
    getChannelStatus() {
      let param = {
        type: "auditOpinion"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.auditOpinion = res.data;
        }
      });
    },


    // 通过id 查询这条信息
    getUserById() {
      getUserById(this.companyForm)
        .then(res => {
          if (res.code === "0000") {
            this.companyForm = res.data;
            this.getUserRole();
            this.getFormerUserRole();
            this.imgzurl  = `${_AFS_PROJECT_CONFIG.apiUri}/${getUri('image')}/upload/getBlob/${res.data.fileType}/${res.data.fileId}`;
          }
        })
        .catch(() => {});
    },

    // 点击返回
    handleBack() {
      // 先关闭本页面再跳转页面
      this.afs.closeTab(this);
    },
    seePhoto(){
      this.seeUserPhoto = !this.seeUserPhoto;
    },
    // 点击提交
    handleCommit(name) {
      if (
        this.companyForm.useStstus == null ||
        this.companyForm.useStstus == undefined ||
        this.companyForm.useStstus == ""
      ) {
        this.$Message.error("请选择审批意见！");
        return;
      }
      if(this.companyForm.useStstus!="00"){

        if(this.companyForm.startStopReason==null||this.companyForm.startStopReason==''||this.companyForm.startStopReason==undefined){
          this.$Message.error("请填写备注！");
          return;
        }
      }
      let params = {
        id: this.companyForm.id,
        status: this.companyForm.useStstus,
        reason: this.companyForm.startStopReason
      };
      // 点击提交操作修改见证人状态
      toExamine(params)
        .then(res => {
          if (res.code === "0000") {
            this.$Message.success("操作成功");
             this.afs.closeTab(this);
            
          }
        })
        .catch(() => {});
    },


    // 获取合作商信息接口
    getBaseInfo() {
      getBaseInfo({status:""}).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.baseInfo = res.data;
        }
      });
    },

    getNewRole() {
      getNewRole({}).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.newRoleList = res.data;
        }
      });
    },

    getOldRole() {
      getOldRole({}).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.oldRoleList = res.data;
        }
      });
    },

    getUserRole() {
      getUserRole(this.companyForm).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.border = res.data;
          console.log(this.border.length+"aaaaa")
        }
      });
    },

    getFormerUserRole() {
      getFormerUserRole(this.companyForm).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.formerBorder = res.data;
          console.log(this.formerBorder.length+"bbbbb")
        }
      });
    },

  },
  // 初始化加载
  mounted() {
    this.init();
  }
};
</script>
